<template>
	<custom-page title="异常上报" borderBottomColor="transparent" backgroundColor="#F9F9F9">
		<template #content>
			<view class="page-content">
				<view class="top-layout">
					<view class="title">异常类型：</view>
					<view class="divider"></view>
					<view class="item-row" v-for="(item, index) in abnormalState" @click="typeClick(item)">
						<image class="left-img" :src="(item.enumCode==abnormalType)?asserts.ic_radio_select:asserts.ic_radio_normal"></image>
						<view>{{item.enumDesc}}</view>
					</view>
				</view>
				<view class="input-layout">
					<view class="title">情况说明：</view>
					<view class="input-area">
						<textarea placeholder="请输入情况说明" v-model="presentationCondition" maxlength="200"></textarea>
						<view class="input-size">{{(presentationCondition)?presentationCondition.length:0}}/200</view>
					</view>
				</view>
				<view style="height: 16rpx;"></view>
				<custom-bottom-button text="提交" @confirm="confirmClick"></custom-bottom-button>
			</view>
		</template>
	</custom-page>
</template>

<script>
	export default {
		data() {
			return {
				presentationCondition: '',
				abnormalType: '',
				abnormalState: {},
				orderNo: '',
				userType: '',
			}
		},
		onLoad(val) {
			this.orderNo = val.orderNo
			this.userType = val.userType
			this.getOrderAbnormalState()
		},
		methods: {
			//订单异常状态枚举获取
			getOrderAbnormalState(){
				let params = {
					userType: this.userType
				}
				this.requestCenter.getOrderAbnormalState(params).then(res => {
					this.abnormalState = res
				})
			},
			
			//类型点击
			typeClick(item){
				this.abnormalType = item.enumCode
			},
			
			//点击确认
			confirmClick(){
				if(!this.presentationCondition){
					if(!this.title){
						uni.showToast({
							title: '请输入情况说明'
						})
						return
					}
				}
				uni.showModal({
					title: '确定上报吗？',
					success: (modal) => {
						if (modal.confirm) {
							let params = {
								presentationCondition: this.presentationCondition,
								abnormalType: this.abnormalType,
								orderNo: this.orderNo
							}
							this.requestCenter.abnormalSave(params).then(res => {
								uni.showToast({
									title: "上报成功",
									duration: 500,
									complete: () => {
										uni.navigateBack()
									}
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.top-layout,
	.input-layout{
		display: flex;
		flex-direction: column;
		padding: 0 32rpx 32rpx 32rpx;
		box-sizing: border-box;
		background-color: white;
		margin-bottom: 16rpx;
		.title{
			height: 88rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #021624;
			font-weight: 500;
		}
	}
	.item-row:first-of-type{
		margin-top: 24rpx;
	}
	.item-row{
		padding: 24rpx 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		color: #021624;
		font-weight: 400;
		.left-img{
			width: 40rpx;
			height: 40rpx;
			margin-right: 32rpx;
		}
	}
	.divider{
		width: 100%;
		height: 1rpx;
		background-color: #F5F5F5;
		margin-bottom: 24rpx;
	}
	.input-area{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		background-color: white;
		padding: 32rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #021624;
		background-color: #F9F9F9;
		border-radius: 16rpx;
		textarea{
			width: 100%;
			height: 300rpx;
		}
	}
</style>
